<template>
  <el-form ref="form" :model="form" :rules="formRules" style="margin-top: 20px" label-position="top">
    <el-alert
        :closable="false"
        title="Please fill in the invitee’s Office 365 email address so that the invitee can sign up or sign in to MSPbots and join the group more easily."
        type="info">
    </el-alert>
    <el-form-item label="Email" prop="email">
      <el-input type="textarea" resize="none" v-model="form.emails" placeholder="Separate emails with commas. Example: email@example.com, email2@example.com. " :autosize="{ minRows: 3, maxRows: 6}"></el-input>
    </el-form-item>
    <el-form-item label="Description">
      <el-input type="textarea" resize="none" v-model="form.description" placeholder="Please enter a description for your invitation." :autosize="{ minRows: 3, maxRows: 6}"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'newGroupStep3',
  props: ['form'],
  data () {
    return {
      formRules: {
        // email: [
        //   { required: true, message: 'Please Enter', trigger: 'blur' }
        // ]
      }
    }
  },
  watch: {
    form (val) {
      this.$emit('update:form', val)
    }
  },
  methods: {
    async submitForm () {
      return this.$refs['form'].validate()
    }
  }
}
</script>

<style scoped>
::v-deep .el-form-item__label{
  font-weight: bold;
}
</style>
